<template>
        <div>
                <but></but>
                <div class="serach">
                        <div style="width:80%;height:100%;">                                
                                <input 
                                type="text" 
                                placeholder="Ins风佩饰 " 
                                v-model="value"
                                @click="goserach"                                
                                style="width:95%;height:50%;font-size: 12px;text-indent: 20px;border-radius: 30px;margin-top: 15px;background-color: #eae9e5;border: none;color: #c8aba9;"/>                                
                        </div>
                        <div style="width:15%;height:100%;">
                                <el-button 
                                text 
                                @click="dialogVisible = true"
                                style="width:100%;height:50%;font-size: 12px;margin-top: 15px;border-radius: 30px;border: 1px solid #c8aba9;background-color: #ffffff;color: #c8aba9;">
                                        签到
                                </el-button>
                        </div>
                        
                        <el-dialog
                        v-model="dialogVisible"
                        title=""
                        width="250px"
                        height="200px"
                        center
                        :before-close="handleClose"
                        >
                        <img src="../../assets/001.png" alt="">
                        <template #footer>
                        <span class="dialog-footer">
                                <el-button @click="dialogVisible = false">X</el-button>                                
                        </span>
                        </template>
                        </el-dialog>
                </div>
        </div>
</template>
     
<script setup lang="ts">
import but from '@/componets/but.vue'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

 const $router = useRouter()


let value = ref('')

const dialogVisible = ref(false)

function goserach(){
        $router.push({path:'/serachPage'})
}



</script>
<style scoped>
        .serach{
                width: 100%;
                height: 60px;
                display: flex;
                justify-content: center;                
        }
</style>